<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
    <style>
        #icon- {
            margin: 0 5px 0 0;
            font-size: 20px;
            position: relative;
            top: 5px;
        }
        #t {
            height: 250px;
            width: 220px;
            background-color: darkgray;
        }
    </style>
</head>

<body>
    <div class="container">
        <header class="row py-2 align-items-center text-center">
            <div class="col text-left ">
                <a href="" class="text-muted">Subscribe</a>
            </div>
            <div class="col">
                <h2><a href="" class="text-dark text-decoration-none">Large</a></h2>
            </div>
            <div class="col text-right">
                <a href=""><i class="fab fa-weixin text-decoration-none text-muted" id="icon-"></i></a>
                <a href="#" class="btn btn-sm btn-outline-secondary">Sign up</a>
            </div>
        </header>
        <div class="border-bottom"></div>
        <nav class="d-flex justify-content-between py-2 mb-2 overflow-auto">
            <a href="" class="text-muted p-2">Hello</a>
            <a href="" class="text-muted p-2">Hello</a>
            <a href="" class="text-muted p-2">Hello</a>
            <a href="" class="text-muted p-2">Hello</a>
            <a href="" class="text-muted p-2">Hello</a>
            <a href="" class="text-muted p-2">Hello</a>
            <a href="" class="text-muted p-2">Hello</a>
            <a href="" class="text-muted p-2">Hello</a>
            <a href="" class="text-muted p-2">Hello</a>
        </nav>


        <div class="jumbotron bg-dark text-white p-2">
            <div class="col-md-6 mt-3">
                <h1 class="display-4 font-italic">Hello, world!</h1>
                <p class="lead font-italic">This is a simple hero unit, a simple jumbotron-style component for calling extra
                    attention
                    to featured content or information.</p>
                <p>It uses utility classes for typography and spacing to space content out within the larger container.
                </p>
                <p class="lead">
                    <a class="text-white font-weight-bold" href="#">Continue to read</a>
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col"></div>
                    <div class="col-auto">
                        <a href=""><div class="box200-500" id="t"></div></a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>